<template>
  <el-dialog
      v-model="dialogVisible"
      title="查看数据"
      width="95%"
      class="lookDialog"
  >
    <el-table
        border
        header-cell-class-name="headerCell"
        class="lookTable"
        height="500"
        :data="reportStore.lookDetailTbaleData"
        style="width: 100%"
        v-loading="reportStore.tableDeatilLoading"
    >
      <el-table-column
          width="200"
          header-align="center"
          align="center"
          v-for="(item,index) in reportStore.lookDetailTbaleHeaders"
          :prop="item" :label="item">
        <template #default="scope">
          <div class="text-hidden-one">{{ scope.row[item] }}</div>
        </template>
      </el-table-column>
    </el-table>
    <template #footer>
      <span class="dialog-footer">
        <el-pagination
            class="flex-justify-content-end"
            v-model:current-page="reportStore.page"
            v-model:page-size="reportStore.limit"
            :page-sizes="[50,100, 200, 300, 400]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="reportStore.total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
      </span>
    </template>

  </el-dialog>
</template>
<script setup lang="ts">
//组件

//接口


//api
import {reactive, ref} from 'vue';
import useReportStore from "@/store/modules/report/report";

//data
const dialogVisible = ref<boolean>(false)
const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
]
let reportStore = useReportStore()
const currentPage = ref(1)
const pageSize = ref(1)
/*
函数
*/

/**************************接口函数**************************/


/**************************操作函数**************************/
let init = async (id: string) => {
  dialogVisible.value = true
  await Promise.all([reportStore.useGetDataItemTableHeaders(id), reportStore.useGetDataItemTableData(id)])
}

const handleSizeChange = (val: number) => {
  reportStore.useGetDataItemTableData(reportStore.dataId)
}
const handleCurrentChange = (val: number) => {
  reportStore.useGetDataItemTableData(reportStore.dataId)
}


defineExpose({
  dialogVisible,
  init
})
</script>

<style lang="scss" scoped>
.lookTable {
  :deep(.el-table__header  .el-table__cell) {
    background-color: #F2F2F2;
  }
}
</style>

